<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 引入重置样式表 -->
        <link rel="stylesheet" href="./css/reset.css" />
        <!-- 引用图标字体 -->
        <link rel="stylesheet" href="./fa/css/all.css" />
        <title>京东顶部的导航条</title>
        <style>
            /* 
              解决高度塌陷和外边距重叠
            */
            .clearfix::before,
            .clearfix::after {
                content: '';
                display: table;
                clear: both;
            }

            /* 设置全局字体大小 */
            body {
                font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
                    Hiragino Sans GB, '\5B8B\4F53', sans-serif;
            }

            /* 设置外部容器的样式 */
            .top-bar-wrapper {
                /* 设置宽度 */
                width: 100%;
                /* 设置背景颜色 */
                background-color: #e3e4e5;
                height: 30px;
                /* 只设置line-height就可以撑起整个元素 */
                /* 设置行高,没有设置高度 使文字垂直居中 */
                line-height: 30px;
                /* 设置下边框 */
                border-bottom: 1px #ddd solid;
            }

            /* 设置内部容器的样式 */
            .top-bar {
                /* 固定宽度 */
                width: 1190px;
                /* 设置水平居中 */
                margin: 0 auto;

                /* 开启相对定位 */
                position: relative;
            }

            /* 设置字体颜色 */
            .top-bar a,
            .top-bar span,
            .top-bar i {
                color: #999;
                text-decoration: none;
            }

            /* 设置字体的效果 */
            .top-bar a:hover,
            .top-bar a.highlight {
                color: #f10215;
            }

            /* 设置location */
            .location {
                float: left;
            }

            /* 设置下坐标框 */
            .location .city-list {
                display: none;
                width: 320px;
                height: 436px;
                background-color: white;
                border: 1px solid rgb(204, 204, 204);
                /* 设置绝对定位,使其不占据页面的文档流 */
                position: absolute;
                z-index: 9999;
                top: 31px;
                /* 设置阴影 */
                box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
            }

            /* 
            设置显示坐标框
              当鼠标移入div时,让它下边的兄弟元素出现 
            */
            /* .current-city:hover + .city-list {
                display: block;
            } */

            /* 因为点击那片空白区域,也要显示弹窗,移入location的时候,要让city-list显示 */
            .location:hover .city-list {
                display: block;
            }

            /* 设置北京的内边距等 */
            .current-city {
                padding: 0 10px;
                /* background-color: white;
                border: 1px solid rgb(204, 204, 204);
                border-bottom: none; */
            }

            /* 设置北京的移入效果 */
            .current-city:hover {
                background-color: white;
                border: 1px solid rgb(204, 204, 204);
                border-bottom: none;
                padding-bottom: 1px;
                position: relative;
                z-index: 9998;
            }

            /* 设置location下的小图标 */
            .location .fas {
                font-size: 14px;
                color: #f10215;
            }

            /* 设置shortcut */
            .shortcut {
                float: right;
            }

            /* 设置分割线 */
            .shortcut .line {
                width: 1px;
                height: 10px;
                background-color: #999;
                margin: 10px 10px;
            }

            /* 设置li */
            .shortcut li {
                float: left;
            }
        </style>
    </head>
    <body>
        <!-- 创建外围的容器 -->
        <div class="top-bar-wrapper">
            <!-- 创建内部容器 -->
            <div class="top-bar clearfix">
                <!-- 左侧的菜单 -->
                <div class="location">
                    <div class="current-city">
                        <i class="fas fa-map-marker-alt"></i>
                        <a href="javascript:;">北京</a>
                    </div>
                    <!-- 放置城市列表的div -->
                    <div class="city-list"></div>
                </div>

                <!-- 右侧的菜单 -->
                <ul class="shortcut">
                    <li>
                        <a href="javascript:;">你好，请登录</a>
                        <a class="highlight" href="javascript:;">免费注册</a>
                    </li>
                    <!-- 分隔线 -->
                    <li class="line"></li>
                    <li>
                        <a href="javascript:;">我的订单</a>
                    </li>
                    <li class="line"></li>
                    <li>
                        <a href="javascript:;">我的京东</a>
                        <i class="fas fa-angle-down"></i>
                    </li>
                    <li class="line"></li>
                    <li>
                        <a href="javascript:;">京东会员</a>
                    </li>
                    <li class="line"></li>
                    <li>
                        <a href="javascript:;">企业采购</a>
                        <i class="fas fa-angle-down"></i>
                    </li>
                    <li class="line"></li>
                    <li>
                        <i>客户服务</i>
                        <i class="fas fa-angle-down"></i>
                    </li>
                    <li class="line"></li>
                    <li>
                        <i>网站导航</i>
                        <i class="fas fa-angle-down"></i>
                    </li>
                    <li class="line"></li>
                    <li>
                        <i>手机京东</i>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>
